<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import UploadAvatar from "../../../components/UploadAvatar.vue"
import { userService } from "../../../api/user";
import { message } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
onMounted(() => {
    DocInfo()
})
const DocInfo = async () => {
    const response = await userService.info("100001")
    console.log(response)
    state.doctorInfo = response.data
    console.log(state.doctorInfo);
    
}
const state = reactive({
    //医生后端的数据做个映射
    doctorInfo: {
        id: null,
        name: "",
        gender: "",
        hospital: "",
        depart: "",
        role: "",
        info: "",
        goodAt: "",
        area: "",
        contact: "",
        phone: "",
        icon:""
    },

    //把下面label的标签的中文填到数组里 也要跟上面一一对应 
    // zh_doctor_label: ["id", "姓名", "性别", "所属医院", "所属科室", "职位", "所在城市", "擅长部位", "联系方式", "手机号","个人介绍","头像"],
    //是否可编辑
    disabled: true
})
console.log();

const updateInfo = async () => {
    const response = await userService.updateInfo(state.doctorInfo)
    if (response.data.code == 200) {
        message.success(response.data.msg)
    } else {
        message.error(response.data.msg)
    }
}

</script>
<template>
    <div class="main">
        <!-- <div class="left">
            <UploadAvatar />
        </div> -->
        <div class="right">
            <a-descriptions bordered title="基本信息">
                <template #extra>
                    <a-button type="primary" @click="state.disabled = false">编辑</a-button>
                    <a-button type="primary" @click="updateInfo()" danger>保存</a-button>
                </template>
                <!-- <template v-for="(item, key, index) in state.doctorInfo">
                    <a-descriptions-item :label="state.zh_doctor_label[index]" >
                        <a-input v-model:value="state.doctorInfo[key]" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                </template> -->
                <a-descriptions-item label="姓名" >
                        <a-input v-model:value="state.doctorInfo.name" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                    <a-descriptions-item label="性别" >
                        <a-input v-model:value="state.doctorInfo.gender" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                    <a-descriptions-item label="所属医院" >
                        <a-input v-model:value="state.doctorInfo.hospital" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                    <a-descriptions-item label="所属科室" >
                        <a-input v-model:value="state.doctorInfo.depart" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                    <a-descriptions-item label="所在城市" >
                        <a-input v-model:value="state.doctorInfo.area" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                    <a-descriptions-item label="擅长部位" >
                        <a-input v-model:value="state.doctorInfo.goodAt" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                    <a-descriptions-item label="联系方式" >
                        <a-input v-model:value="state.doctorInfo.contact" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                    <a-descriptions-item label="手机号" >
                        <a-input v-model:value="state.doctorInfo.phone" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                    <a-descriptions-item label="职位" >
                        <a-input v-model:value="state.doctorInfo.role" :bordered="false" :disabled="state.disabled" />
                    </a-descriptions-item>
                <a-descriptions-item label="个人介绍">
                    <a-textarea v-model:value="state.doctorInfo.info" :bordered="false" autosize :rows="4"
                        :disabled="state.disabled" />
                </a-descriptions-item>
            </a-descriptions>
        </div>

    </div>
</template>
<style>
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.main .left {
    flex-grow: 1;
}

.main .right {
    flex-grow: 5;
}
</style>